﻿<template v-if="variant.AddToCart.EnteredPrice">
    <div class="customer-entered-price mb-3 d-flex w-100 flex-column">
        <div class="price-input">
            <label :for="'addtocart_' + variant.AddToCart.ProductId + '_CustomerEnteredPrice'" class="enter-price-label">@Loc["Products.EnterProductPrice"]</label>
            <input :id="'addtocart_' + variant.AddToCart.ProductId + '_CustomerEnteredPrice'" :name="'CustomerEnteredPrice'" type="text" :value="variant.AddToCart.CustomerEnteredPrice" class="form-control enter-price-input"/>
        </div>
        <div class="price-range pt-1">
            {{variant.AddToCart.CustomerEnteredPriceRange}}
        </div>
    </div>
</template>
<template v-if="!variant.AddToCart.DisableBuyButton || variant.AddToCart.EnteredPrice">
    <template v-if="variant.AddToCart.MinimumQuantityNotification !== null">
        <div class="min-qty-notification text-danger w-100 mb-2">{{variant.AddToCart.MinimumQuantityNotification}}</div>
    </template>
</template>
<div role="group" class="input-group product-add-to-cart flex-nowrap">
    <template v-if="!variant.AddToCart.DisableBuyButton">
        <template v-if="variant.AddToCart.AllowedQuantities.length > 0">
            <select :id="'addtocart_' + variant.AddToCart.ProductId + '_EnteredQuantity'" :name="'EnteredQuantity'" class="custom-select form-control qty-dropdown mr-2">
                <template v-for="option in variant.AddToCart.AllowedQuantities">
                    <option :value="option.Value" :disabled="option.Disabled" :selected="option.Selected">{{option.Text}}</option>
                </template>
            </select>
        </template>
        <template v-else>
            <label :for="'addtocart_' + variant.AddToCart.ProductId + '_EnteredQuantity'" class="sr-only">@Loc["ShoppingCart.AddToCart"]</label>
            <input :value="variant.AddToCart.EnteredQuantity" :id="'addtocart_' + variant.AddToCart.ProductId + '_EnteredQuantity'" :name="'EnteredQuantity'" value="" class="qty-input form-control text-center" type="number" inputmode="numeric"/>
            <template v-if="variant.AddToCart.MeasureUnit !== null">
                <span class="qty-unit d-flex align-items-center mr-2">
                    {{variant.AddToCart.MeasureUnit}}
                </span>
            </template>
        </template>
        <div class="input-group-append">
            <button type="button" :id="'add-to-cart-button-' + variant.AddToCart.ProductId" class="btn btn-info w-100 add-to-cart-button d-inline-flex" data-productid="variant.AddToCart.ProductId" :onclick="'AxiosCart.addproducttocart_details(`/addproducttocart/details/' + variant.AddToCart.ProductId + '/1`, `#product-details-form`);return false;'">
                <span>
                    <template v-if="variant.AddToCart.IsAuction">
                        @Loc["ShoppingCart.BuyNow"]
                    </template>
                    <template v-else-if="variant.AddToCart.IsReservation">
                        @Loc["ShoppingCart.Reservation"]
                    </template>
                    <template v-else-if="variant.AddToCart.AvailableForPreOrder">
                        @Loc["ShoppingCart.PreOrder"]
                    </template>
                    <template v-else>
                        @Loc["ShoppingCart.AddToCart"]
                    </template>
                </span>
            </button>
        </div>
    </template>
</div>